<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>Opanorama - H5全景</title>
  <meta name="keywords" content="ThreeJS,全景,移动端,js库,手势,陀螺仪">
  <meta name="description" itemprop="description" content="Opanorama是一个同时支持手势和陀螺仪的web全景的JS库">
  <meta name="viewport" id="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <style>
    * {
      margin: 0;
      padding: 0;
      outline: 0;
      letter-spacing:140%;
      font-family: "Microsoft YaHei";
    }

    .panorama, .wrap{
      position: absolute;
      z-index: 0;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .wrap {
      z-index: 10;
    }

    .qrcode-wrap {
      z-index: 100;
      background-color: #FFF;
      padding: 20px;
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    .inner {
      position: relative;
      top: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: auto;
      overflow: hidden;
      background-color: rgba(250, 250, 250, 0.5);
      padding: 10px;
      text-align: center;
    }

    .title {
      font-weight: bold;
    }

    .link {
      background: none;
      outline: none;
      border: none;
      color: #000;
      font-weight: bold;
    }
    .btn-wrap{
      margin-top: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="panorama"></div>
<div class="wrap" style="display: none;">
  <div class="inner">
    <p><span class="title">Opanorama.js</span> -- 基于Threejs，同时支持手势和陀螺仪的web全景JS库。</p>
    <div class="btn-wrap">
      <a class="link" target="_blank" href="https://github.com/azuoge/Opanorama">Github</a>
      <span>&nbsp;&nbsp;</span>
      <a class="link" id="show-qrcode" href="javascript:void(0);">H5示例</a>
    </div>
  </div>
</div>
<div class="qrcode-wrap" style="display: none;">
  <div><img width="200" src="./res/qrcode.png"></div>
  <div class="btn-wrap">
    [ <a class="link" id="close-qrcode" href="javascript:void(0);">关闭</a> ]
  </div>
</div>
<script>
  var ua = navigator.userAgent || '';
  var isMobile = ua.match(/(iPad).*OS\s([\d_]+)/)
    ||ua.match(/(iPhone\sOS)\s([\d_]+)/)
    ||ua.match(/Android/);
  (function(){
    if(!isMobile){
      document.querySelector('.wrap').style.display = 'block';
    }

    var qrcodeWrap = document.querySelector('.qrcode-wrap');
    document.querySelector('#show-qrcode').addEventListener('click', function () {
      qrcodeWrap.style.display = 'block';
    });
    document.querySelector('#close-qrcode').addEventListener('click', function () {
      qrcodeWrap.style.display = 'none';
    });
  })();
</script>
<script src="./three.js"></script>
<script src="./Opanorama.js"></script>
<script>
  (function(){
    var longitude = 0,mark='add';
    new Opanorama({
      offsetLongitude: 0,
      offsetLatitude: 90,
      fov: 90,
      url:  './res/'+(isMobile?Math.floor((Math.random()*3)):'pc')+'.jpg',
      container: document.querySelector('.panorama'),
      onFrame:function(lon, lat) {
        if(isMobile){
          return;
        }
        if(longitude ==360){
          mark = 'sub';
        }
        if(longitude === 0){
          mark = 'add';
        }

        switch(mark){
          case 'add':
            longitude += 0.05;
            break;
          case 'sub':
            longitude -= 0.05;
            break;
        }
        return {lon: lon + longitude,lat: -90}
      }
    });
  })();
</script>
</body>
</html>